page {
  background: #f5f5f5;
  height: auto;
}

.chat {
  box-sizing: border-box;
  height: auto;
  .u-sticky {
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    max-height: 82rpx;
  }
  .u-sticky__content {
    background: #ffffff;
    width: 100%;
    top: 0;
    max-height: 82rpx;
    position: fixed !important;
  }
}
.sticky-box {
  max-height: 82rpx;
  width: 100%;
}
.sticky {
  border-top: 1px solid #f5f5f5;
  background: #ffffff;
  color: #111111;
  font-size: 28rpx;
  padding: 21rpx 32rpx;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  .down-icon {
    font-size: 20rpx;
    color: #cccccc;
    margin-left: 10rpx;
  }
  .right-icon {
    margin-left: 18rpx;
  }
}
.chat-box {
  padding: 120rpx 24rpx 40rpx;
  &.chat-box-top {
    padding: 30rpx 24rpx 40rpx;
  }
  .chat-card-Rx {
    &.chat-card {
      padding: 0;
      background: #ffffff;
      .chat-title {
        font-size: 32rpx;
        padding: 18rpx 24rpx 24rpx;
        background: linear-gradient(180deg, #e7eeff, #ffffff);
        border-radius: 20rpx 0px 0px 0px;
        &.chat-title_user {
          background: linear-gradient(180deg, #e7fff1 1%, #dff8e9 1%, #ffffff);
        }
        &.chat-title3 {
          padding: 18rpx 24rpx 28rpx;
        }
        &.chat-title1 {
          padding: 24rpx 24rpx 0;
          background: #ffffff;
        }
        &.chat-title2 {
          padding: 24rpx;
          background: #ffffff;
        }
      }
    }
  }
  .chat-left {
    .chat-left-col2 {
      margin-left: 20rpx;
    }
    .chat-card-Rx {
      &.chat-card {
        .chat-title {
          border-radius: 0px 20rpx 0px 0px;
        }
      }
    }
  }
}
.content-chat {
  background: #f5f5f5;
  .chat-box {
    box-sizing: border-box;
    .userCardH {
      width: 100%;
    }
  }
  &.content-chat-scroll {
    height: 100vh;
    padding-bottom: 266rpx;
    box-sizing: border-box;
    .chat-box {
      margin-bottom: 280rpx;
      height: 100%;
    }
    &.content-chat-over1 {
      padding-bottom: 400rpx;
    }
    &.content-chat-over {
      padding-bottom: 20rpx;
    }
  }
  &.content-chat-over2 {
    padding-bottom: 40rpx;
  }
  &.content-chat3 {
    .chat-box {
      padding-bottom: 40rpx;
    }
  }
}

.send-btn {
  padding: 10rpx 0;
  .u-button {
    height: 70rpx !important;
    width: 110rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
  }
}
.chat-section,
.notice {
  .message-time {
    color: #aaaaaa;
    font-size: 28rpx;
    text-align: center;
    margin: 0 0 30rpx;
  }
  > p {
    color: #999999;
    font-size: 28rpx;
    text-align: center;
    .active {
      color: #4abf78;
    }
    &.date {
      font-size: 28rpx;
      margin: 0;
    }
  }
}
.chat-left-col2 {
  .chat-card {
    display: inline-block;
    margin-right: 20rpx;
    border-radius: 0 20rpx 20rpx 20rpx;
  }
}
.messageContent {
  width: 100%;
  .message-margin {
    margin: 0 20rpx 30rpx;
  }
  .right-icon {
    margin-left: -8rpx;
  }
}
.chat-card {
  padding: 26rpx 30rpx;
  background: #ffffff;
  border-radius: 20rpx 0 20rpx 20rpx;
  margin-right: 20rpx;
  font-size: 30rpx;
  color: #111111;
  word-break: break-all;
  display: inline-block;
  margin-bottom: 30rpx;
  &.chat-card-Rx {
    display: block;
  }
  &.chat-card-Rx2 {
    margin-left: 76rpx;
  }
  .card-Rx {
    padding: 0 26rpx 22rpx;
  }
}

.chat-right {
  .chat-card {
    margin-left: 76rpx;
    background: #def1e5;
    &.chat-card-img {
      background: #ffffff;
    }
  }
  .chat-card-Rx {
    margin-left: 76rpx;
    // margin-left: 100rpx;
    &.chat-card-Rx2 {
      margin-left: 76rpx;
      // margin-left: 96rpx;
    }
    &.chat-card-Rx3 {
      margin-left: 76rpx;
    }
  }
}
.chat-left {
  .chat-card {
    margin-right: 76rpx;
    border-radius: 0 20rpx 20rpx 20rpx;
    margin-left: 20rpx;
  }
  .chat-card-Rx {
    margin-right: 76rpx;
    &.chat-card-Rx2 {
      margin-right: 76rpx;
    }
    &.chat-card-Rx3 {
      margin-right: 76rpx;
    }
  }
  .chat-left-col2 {
    width: 100%;
    margin-left: 20rpx;
  }
}

.divider {
  width: 60%;
  margin: 0 auto;
}

.page_footer-chat {
  background: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  &.page_footer-chat1 {
    background: #f5f5f5;
  }
  &.page_footer-chat2 {
    .consultation-doctor {
      background: #ffffff;
      padding: 10rpx 30rpx;
    }
    .btn-box {
      padding: 30rpx 20rpx;
      .sbio_flex__item {
        margin: 0 10rpx;
      }
      .u-button {
        height: 88rpx !important;
        line-height: 88rpx;
        font-size: 30rpx !important;
      }
    }
  }
  &.page_footer-chat4 {
    .consultation-doctor {
      .team-name-title {
        display: none;
      }
    }
  }
}
